<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>scrollEvent</title>
</head>

<body>
    <div id="container">
        <div class="box" style="height:200px; overflow: auto;">
            <ul id="ul" style="height: 3000px; background-color:#eee;">
            </ul>
        </div>
    </div>
    <script>
        const oUL = document.querySelector('.box');
        console.log(oUL)
        // oUL.addEventListener('scroll', (e) => {
        //     console.log("scroll", e.target.scrollTop);
        // })

        // oUL.addEventListener('scroll', () => {
        //     console.log("scroll", oUL.scrollTop);
        // })

        oUL.addEventListener('scroll', ({target}) => {
            console.log("scroll", target.scrollTop);
        })
    </script>
</body>

</html>